﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过渡下拉菜单</title>
    <style type="text/css">
        #main {
            background-color: #CEFFEC;
            width: 300px;
        }
        #main ul {
            height: 9 rem;
            overflow-x: hidden;
        }
        .fade-enter-active, .fade-leave-active {
            transition: height 0.5s
        }
        .fade-enter, .fade-leave-to {
            height: 0
        }
    </style>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="main">
        <button @click="test">主页</button>
        <transition name="fade">
            <ul v-if="show">
                <li>经典课程</li>
                      <ul>
                           <li><a href="#">Python开发课程</a></li>
                           <li><a href="#">Java开发课程</a></li>
                           <li><a href="#">网站前端开发课程</a></li>
                        </ul>
                <li>热门技术</li>
                      <ul>
                           <li><a href="#">前端开发技术</a></li>
                           <li><a href="#">网络安全技术</a></li>
                           <li><a href="#">PHP开发技术</a></li>
                        </ul>
                <li>畅销教材</li>
                      <ul>
                           <li><a href="#">网站前端开发教材</a></li>
                           <li><a href="#">C语言入门教材</a></li>
                           <li><a href="#">Python开发教材</a></li>
                        </ul>
                <li>联系我们</li>
            </ul>
        </transition>
    </div>
    </div>
<script>
    const vm = Vue.createApp({
        data() {
            return {
                show: false
            }
        },
        methods: {
            test() {
                this.show= !this.show
            }
        }
    }).mount('#main')
</script>
</body>
</html>